/* 
    蛇类  

    属性 :
        1. 地图
        2. 方向  
        3. 蛇  数组存储 
        // 约定 下标0 蛇头  

    方法:
        创建一条蛇 
            (创建一节 创建一条蛇)

        移动 
        吃食物 
        是否die 



*/

export default class Snake{

    constructor(selector){
        this.map = document.querySelector(selector);
        // 方向
        this.direaction = 'right';
        // 蛇
        this.snake = [];
        this.create();
    }

    createOne(){
        const head = this.snake[0]; // 头
        if(head !== undefined){
            head.className = 'body';
        }


        const ele = document.createElement('div');
        ele.className = 'head';
        this.snake.unshift(ele);


        


        // 为了体现 移动的效果 
        // 每次创建新头    位置需要变化  

        // 方向   
        // 左    left - 20
        // 右    left + 20
        // 上    top  - 20
        // 下    top  + 20

        // 获取头原来的位置  
        // 位置:
        //     offsetLeft 
        //     offsetTop 
        const pos = {x:-20,y:0}; // 初始没有头  位置是0 0 
        // 如果有头
        if(head !== undefined){
            pos.x = head.offsetLeft;
            pos.y = head.offsetTop;
        }

        switch(this.direaction){
            case 'left':
                pos.x -= 20;
                break
            case 'right':
                pos.x += 20;
                break
            case 'top':
                pos.y -= 20;
                break
            case 'bottom':
                pos.y += 20;
                break
        }


        ele.style.left = pos.x + 'px';
        ele.style.top = pos.y + 'px';


        // 将上面位置修改好以后再加入到地图上 
        this.map.appendChild(ele);





    }

    create(){
        for(let i=0;i<5;i++){
            this.createOne();
        }
    }
    // 往前走  始终移除最后一个  然后创建一个新头 (会把原来的头变成身子)
    move(){
        // 移除数组最后一个元素 (蛇是个数组)
        // push pop
        // unshift shift
        const body = this.snake.pop(); // 这一步仅仅是从数组移除 
        // 页面上的依然在  
        // 父节点.removeChild(子节点)  子节点.remove()
        body.remove();
        this.createOne();
    }
    // 返回值布尔类型 
    // 如何判断蛇吃掉了食物  
    // 蛇头的位置  和 食物的位置重叠了
    isEat(foodX,foodY){
        // 需要蛇头   
        const head = this.snake[0];
        // 需要食物 形参传递 
        if(head.offsetLeft ===  foodX && head.offsetTop  ===  foodY){
            return true
        }

        return false


    }
    // 也要返回true 或者false 

    isDie(){
        // 需要蛇头  
        const head = this.snake[0];

        // 蛇头 最左  不能小于0  
        // 最后   不能超过地图的宽度 
        // 蛇头 最上  不能小于0  
        // 最下   不能超过地图的高度 

        // 什么情况over?
        if(head.offsetLeft<0 || head.offsetTop<0  || head.offsetLeft==this.map.clientWidth || head.offsetTop>= this.map.clientHeight ){
            
            return true;
        }

        return false;
    }
}